<template>
	<view>
		<!-- 顶部导航栏 -->
		<view v-if="showHeader" class="header" :style="{ position: headerPosition, top: headerTop, opacity: afterHeaderOpacity }">
			<!-- 搜索框 -->
			<view class="input-box">
				<input placeholder="默认关键字" placeholder-style="color:#c0c0c0;" @tap="toSearch()" />
				<view class="icon search"></view>
			</view>
			<!-- 右侧图标按钮 -->
			<view class="icon-btn"><view class="icon tongzhi" @tap="toMsg"></view></view>
		</view>
		<!-- 占位 -->
		<view v-if="showHeader" class="place"></view>
		<!-- 新人红包弹框 -->
		<uni-popup ref="newUser" type="center" class="newUserBox">
			<image src="../../../static/img/hongbao.png" mode="widthFix" @click="gohongbao()"></image>
		</uni-popup>
		<!-- 轮播图 -->
		<view class="swiper">
			<view class="swiper-box">
				<swiper circular="true" autoplay="true" @change="swiperChange">
					<swiper-item v-for="swiper in swiperList" :key="swiper.id"><image :src="swiper.img" @tap="toSwiper(swiper)"></image></swiper-item>
				</swiper>

				<view class="indicator"><view class="dots" v-for="(swiper, index) in swiperList" :class="[currentSwiper >= index ? 'on' : '']" :key="index"></view></view>
			</view>
		</view>
		<!-- 分类列表 -->
		<view class="category-list">
			<view class="category" v-for="(row, index) in categoryList" :key="index" @tap="toCategory(row)">
				<view class="img"><image :src="row.img"></image></view>
				<view class="text">{{ row.name }}</view>
			</view>
		</view>
		<!-- 每日上新 -->
		<view class="seckill-section">
			<view class="s-header" @click="navToUpDate">
				<view class="sort">
					每日上新
				</view>
				<view class="more">
					{{ i18n.more }}
					<uni-icons type="arrowright" size="14" color="#666" ></uni-icons>
				</view>
			</view>
			<scroll-view class="floor-list" scroll-x>
				<view class="scoll-wrapper">
					<view 
						v-for="(item, index) in newGoodsList" :key="index"
						class="floor-item"
						@click="navToDetailPage(item)"
					>
						<image :src="item.image" mode="aspectFill"></image>
						<text class=" clamp">
							<text class="title">{{item.title}}</text>
						</text>
					</view>
				</view>
			</scroll-view>
		</view>
		
		<!-- 秒杀楼层 -->
		<view class="seckill-section">
			<view class="s-header" @click="navToseckillPage(1)">
				<view class="sort">
					限时购
				</view>
				<text class="tip">8点场</text>
				<uni-countdown color="#FFFFFF" background-color="#f13342" :show-day="false" :hour="countdown.hour" :minute="countdown.minute" :second="countdown.second" @timeup="seckillUpdata"></uni-countdown>
				<view class="more">
					{{ i18n.more }}
					<uni-icons type="arrowright" size="14" color="#666" ></uni-icons>
				</view>
			</view>
			<scroll-view class="floor-list" scroll-x>
				<view class="scoll-wrapper">
					<view 
						v-for="(item, index) in seckillList" :key="index"
						class="floor-item"
						@click="navToseckillPage(item)"
					>
						<image :src="item.image" mode="aspectFill"></image>
						<view class="price">￥{{item.price}}
						<text class="oldPrice">¥{{item.oldPrice}}</text>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<!-- 广告图 -->
		<view class="banner"><image src="/static/img/banner.jpg"></image></view>
		<!-- 商品列表 -->
		<view class="goods-list">
			<!-- tab列表 -->
			<scroll-view scroll-with-animation scroll-x class="topTabBar" :class="tabPosition ? 'fixed' : ''" @scroll="scrollMove" :scroll-left="scrollLeft">
				<view class="innerBox">
					<view class="grid" :class="[tbIndex == tabbarIndex ? 'on' : '']" v-for="(item, tbIndex) in tabType" :key="tbIndex" :id="'ele' + tbIndex" @tap="showType(tbIndex)">
						<view class="text">{{ item.title }}</view>
						<view class="cont">{{ item.cont }}</view>
					</view>
				</view>
			</scroll-view>
			<view class="product-list">
				<view class="product" v-for="product in productList" :key="product.goods_id" @tap="toGoods(product)">
					<view class="imgBox">
						<image mode="widthFix" :src="product.img"></image>
						<view class="tagBox">
							<view class="tags" :class="item.type == 'red' ? 'red' : item.type == 'yellow' ? 'yellow' : 'green'" v-for="(item, index) in product.tags" :key="index">
								{{ item.title }}
							</view>
						</view>
					</view>
					<view class="name">{{ product.name }}</view>
					<view class="info">
						<view class="price">{{ product.price }}</view>
						<view class="slogan">{{ product.slogan }}</view>
					</view>
				</view>
			</view>
			<view class="loading-text">{{ loadingText }}</view>
		</view>
	</view>
</template>

<script>
var ttt = 0;
export default {
  computed: {
      i18n () {  
        // 倒入你需要的对象
        return this.$t('myhome')  
      }  
    },
	data() {
		return {
       lang: 'zh-CN',
			showHeader: true,
			afterHeaderOpacity: 1, //不透明度
			headerPosition: 'fixed',
			headerTop: null,
			statusTop: null,
			nVueTitle: null,
			tabHeight: '',
			tabPosition: '',
			scrollLeft: '',
			moveParams: {
				scrollLeft: 0, // scroll-view滚动的距离,默认为0,因为没有触发滚动
				subLeft: '', //点击元素距离屏幕左边的距离
				subHalfWidth: '', //点击元素的宽度一半
				screenHalfWidth: '' //屏幕宽度的一半
			},
			currentSwiper: 0,
			newUser:true, //是否弹出新人红包
			// 轮播图片
			swiperList: [{ id: 1, src: 'url1', img: '/static/img/01.jpg' }, { id: 2, src: 'url2', img: '/static/img/2.jpg' }, { id: 3, src: 'url3', img: '/static/img/03.jpg' }],
			// 分类菜单
			categoryList: [
				{ id: 1, name: '每日上新', img: '/static/img/category/01.png' },
				{ id: 2, name: '小米众筹', img: '/static/img/category/02.png' },
				{ id: 3, name: '限时抢购', img: '/static/img/category/03.png' },
				{ id: 4, name: '热销排行', img: '/static/img/category/04.png' },
				{ id: 5, name: '小米自营', img: '/static/img/category/05.png' }
			],
			// 每日上新
			newGoodsList: [
				{
					image: "/static/img/goods/p1.jpg",
					title: "古黛妃 短袖t恤女夏装2019新款韩版宽松",
					price: 179,
					sales: 61,
				},
				{
					image: "/static/img/goods/p2.jpg",
					title: "潘歌针织连衣裙",
					price: 78,
					sales: 16,
				},
				{
					image: "/static/img/goods/p3.jpg",
					title: "潘歌针织连衣裙",
					price: 78,
					sales: 16,
				},
				{
					image: "/static/img/goods/p4.jpg",
					title: "巧谷2019春夏季新品新款女装",
					price: 108.8,
					sales: 5,
				},
				{
					image: "/static/img/goods/p5.jpg",
					title: "巧谷2019春夏季新品新款女装",
					price: 108.8,
					sales: 5,
				},
			],
			// 秒杀
			seckillList: [
				{
					image: "/static/img/goods/p1.jpg",
					title: "古黛妃 短袖t恤女夏装2019新款韩版宽松",
					price: 179,
					oldPrice: 200,
					sales: 61,
				},
				{
					image: "/static/img/goods/p2.jpg",
					title: "潘歌针织连衣裙",
					price: 78,
					oldPrice: 100,
					sales: 16,
				},
				{
					image: "/static/img/goods/p3.jpg",
					title: "潘歌针织连衣裙",
					price: 78,
					oldPrice: 100,
					sales: 16,
				},
				{
					image: "/static/img/goods/p4.jpg",
					title: "巧谷2019春夏季新品新款女装",
					price: 108.8,
					oldPrice: 150,
					sales: 5,
				},
				{
					image: "/static/img/goods/p5.jpg",
					title: "巧谷2019春夏季新品新款女装",
					price: 108.8,
					oldPrice: 150,
					sales: 5,
				},
			],
			countdown :{
				hour: 0,
				minute:0,
				second: 60,
			},
			tabType: [
				{
					title: '推荐',
					cont: '猜你喜欢'
				},
				{
					title: '米粉节',
					cont: '超值必抢'
				},
				{
					title: '智能',
					cont: '未来已来'
				},
				{
					title: '电器',
					cont: '重塑生活'
				},
				{
					title: '生活',
					cont: '品质生活'
				},
				{
					title: '时尚',
					cont: '美妆搭配'
				},
				{
					title: '特惠',
					cont: '特惠专区'
				}
			],
			tabbarIndex: 0,
			//猜你喜欢列表
			productList: [
				{
					goods_id: 0,
					img: '/static/img/goods/p1.jpg',
					name: '商品名称商品名称商品名称商品名称商品名称',
					price: '￥168',
					slogan: '1235人付款',
					tags: [{ title: '特价', type: 'red' }, { title: '买增', type: 'yellow' }, { title: '限时购', type: 'green' }]
				},
				{
					goods_id: 1,
					img: '/static/img/goods/p2.jpg',
					name: '商品名称商品名称商品名称商品名称商品名称',
					price: '￥168',
					slogan: '1235人付款',
					tags: [{ title: '买增', type: 'yellow' }]
				},
				{
					goods_id: 2,
					img: '/static/img/goods/p3.jpg',
					name: '商品名称商品名称商品名称商品名称商品名称',
					price: '￥168',
					slogan: '1235人付款',
					tags: [{ title: '限时购', type: 'green' }]
				},
				{
					goods_id: 3,
					img: '/static/img/goods/p4.jpg',
					name: '商品名称商品名称商品名称商品名称商品名称',
					price: '￥168',
					slogan: '1235人付款'
				},
				{
					goods_id: 4,
					img: '/static/img/goods/p5.jpg',
					name: '商品名称商品名称商品名称商品名称商品名称',
					price: '￥168',
					slogan: '1235人付款',
					tags: [{ title: '特价', type: 'red' }]
				},
				{
					goods_id: 5,
					img: '/static/img/goods/p6.jpg',
					name: '商品名称商品名称商品名称商品名称商品名称',
					price: '￥168',
					slogan: '1235人付款',
					tags: [{ title: '买增', type: 'yellow' }]
				},
				{
					goods_id: 6,
					img: '/static/img/goods/p7.jpg',
					name: '商品名称商品名称商品名称商品名称商品名称',
					price: '￥168',
					slogan: '1235人付款'
				},
				{
					goods_id: 7,
					img: '/static/img/goods/p8.jpg',
					name: '商品名称商品名称商品名称商品名称商品名称',
					price: '￥168',
					slogan: '1235人付款',
					tags: [{ title: '特价', type: 'red' }, { title: '买增', type: 'yellow' }]
				},
				{
					goods_id: 8,
					img: '/static/img/goods/p9.jpg',
					name: '商品名称商品名称商品名称商品名称商品名称',
					price: '￥168',
					slogan: '1235人付款'
				},
				{
					goods_id: 9,
					img: '/static/img/goods/p10.jpg',
					name: '商品名称商品名称商品名称商品名称商品名称',
					price: '￥168',
					slogan: '1235人付款',
					tags: [{ title: '买增', type: 'yellow' }, { title: '限时购', type: 'green' }]
				}
			],
			loadingText: '正在加载...'
		};
	},
	onPageScroll(e) {
		//兼容iOS端下拉时顶部漂移
		this.headerPosition = e.scrollTop >= 0 ? 'fixed' : 'absolute';
		this.headerTop = e.scrollTop >= 0 ? null : 0;
		this.statusTop = e.scrollTop >= 0 ? null : -this.statusHeight + 'px';
		// 判断tab分类位置
		this.tabPosition = e.scrollTop >= this.tabHeight - 50 ? true : false;
	},
	//下拉刷新，需要自己在page.json文件中配置开启页面下拉刷新 "enablePullDownRefresh": true
	onPullDownRefresh() {
		setTimeout(function() {
			uni.stopPullDownRefresh();
		}, 1000);
		
	},
	//上拉加载，需要自己在page.json文件中配置"onReachBottomDistance"
	onReachBottom() {
		uni.showToast({ title: '触发上拉加载' });
		let len = this.productList.length;
		if (len >= 40) {
			this.loadingText = '到底了';
			return false;
		}
		// 演示,随机加入商品,生成环境请替换为ajax请求
		let end_goods_id = this.productList[len - 1].goods_id;
		for (let i = 1; i <= 10; i++) {
			let goods_id = end_goods_id + i;
			let p = {
				goods_id: goods_id,
				img: '/static/img/goods/p' + (goods_id % 10 == 0 ? 10 : goods_id % 10) + '.jpg',
				name: '商品名称商品名称商品名称商品名称商品名称',
				price: '￥168',
				slogan: '1235人付款'
			};
			this.productList.push(p);
		}
	},
	onLoad() {
		// #ifdef APP-PLUS
		this.nVueTitle = uni.getSubNVueById('homeTitleNvue');
		this.nVueTitle.onMessage(res => {
			let type = res.data.type;
			if (type == 'focus') {
				this.toSearch();
			}
		});
		this.showHeader = false;
		this.statusHeight = plus.navigator.getStatusbarHeight();
		// #endif
	},
	onReady() {
		// 获取tab距顶部高度
		this.getTabHeight();
		// 获取屏幕宽度
		this.getScreenWidth();
		this.getNewUser()
	},
	methods: {
		// 是否弹出新人红包
		getNewUser() {
			if(this.newUser==true) {
				this.$refs.newUser.open()
				this.newUser = false
			}
		},
		// 新人红包跳转
		gohongbao() {
			uni.showToast({
				icon:'none',
				title:'去红包页面'
			})
			uni.navigateTo({
				url:'/pages/user/gifts/gifts'
			})
			this.$refs.newUser.close()
		},
		// 中文tabbar
		setZH() {
		  uni.setTabBarItem({
		    index: 0,
		     text: '首页'
		  })
		  uni.setTabBarItem({
		    index: 1,
		     text: '分类'
		  })
		  uni.setTabBarItem({
		    index: 2,
		     text: '订货单'
		  })
		  uni.setTabBarItem({
		    index: 3,
		     text: '我的'
		  })
		},
		//英文tabbar
		setEN() {
		  uni.setTabBarItem({
		    index: 0,
		     text: 'home'
		  })
		  uni.setTabBarItem({
		    index: 1,
		     text: 'category'
		  })
		  uni.setTabBarItem({
		    index: 2,
		     text: 'cart'
		  })
		  uni.setTabBarItem({
		    index: 3,
		     text: 'mine'
		  })
		},
		//消息列表
		toMsg() {
			// uni.navigateTo({
			// 	url: '../../msg/msg'
			// });
		  var that = this
		  uni.showModal({
		    content:'是否切换语言',
		    success: function (res) {
		            if (res.confirm) {
		              console.log(that)
		                if ( that.lang === 'zh-CN' ) {
		                        that.lang = 'en-US';
		                        that.$i18n.locale = that.lang;//关键语句
		                        that.setEN()
		                     }else {
		                        that.lang = 'zh-CN';
		                        that.$i18n.locale = that.lang;//关键语句
		                        that.setZH()
		                     }
		            } else if (res.cancel) {
		                console.log('用户点击取消');
		            }
		        }
		  })
		},
		
		//搜索跳转
		toSearch() {
			uni.navigateTo({
				url: '/pages/search/search'
			});
		},
		//轮播图跳转
		toSwiper(e) {
			uni.showToast({ title: e.src, icon: 'none' });
		},
		//分类跳转
		toCategory(e) {
			//uni.showToast({title: e.name,icon:"none"});
			uni.setStorageSync('catName', e.name);
			uni.navigateTo({
				url: '../../goods/goods-list/goods-list?cid=' + e.id + '&name=' + e.name
			});
		},
		//商品跳转
		toGoods(e) {
			uni.showToast({ title: '商品' + e.goods_id, icon: 'none' });
			uni.navigateTo({
				url: '../../goods/goods'
			});
		},
		//轮播图指示器
		swiperChange(event) {
			this.currentSwiper = event.detail.current;
		},
		getTabHeight() {
			var that = this;
			uni
				.createSelectorQuery()
				.select('.topTabBar')
				.boundingClientRect(function(e) {
					that.tabHeight = e.top;
				})
				.exec();
		},
		getScreenWidth() {
			var that = this;
			uni.getSystemInfo({
				success(res) {
					let moveParams = that.moveParams;
					moveParams.screenHalfWidth = res.screenWidth / 2;
				}
			});
		},
		getRect(ele) {
			//获取点击元素的信息,ele为传入的id
			var that = this;
			uni
				.createSelectorQuery()
				.select(ele)
				.boundingClientRect(function(rect) {
					let moveParams = that.moveParams;
					moveParams.subLeft = rect.left;
					moveParams.subHalfWidth = rect.width / 2;
					that.moveTo();
				})
				.exec();
		},
		scrollMove(e) {
			let moveParams = this.moveParams;
			moveParams.scrollLeft = e.detail.scrollLeft;
			this.moveParams = moveParams;
		},
		moveTo() {
			let subLeft = this.moveParams.subLeft;
			let screenHalfWidth = this.moveParams.screenHalfWidth;
			let subHalfWidth = this.moveParams.subHalfWidth;
			let scrollLeft = this.moveParams.scrollLeft;
			let distance = subLeft - screenHalfWidth + subHalfWidth;
			scrollLeft = scrollLeft + distance;
			this.scrollLeft = scrollLeft;
		},
		// tab切换
		showType(tbIndex) {
			this.tabbarIndex = tbIndex;
			let ele = 'ele' + tbIndex;
			this.getRect('#' + ele);
			// this.list = this.orderList[tbIndex];
		},
		// 倒计时结束
		seckillUpdata() {
			// 请求数据
			this.countdown.hour= 6
			this.countdown.minute= 6
			this.countdown.second= 6
		},
		// 跳转每日上新
		navToUpDate() {
			uni.navigateTo({
				url: `/pages/activity/update?name=每日上新`
			})
		},
		navToDetailPage(item) {
			//测试数据没有写id，用title代替
			let id = item.title;
			uni.navigateTo({
				url: `/pages/goods/goods?id=${id}`
			})
		},
		navToseckillPage(item) {
			let id = item.title;
			uni.navigateTo({
				url: `/pages/activity/seckill?id=${id}&name=限时抢购`
			})
		}
	}
};
</script>
<style lang="scss">
page {
	position: relative;
	background-color: #fff;
}

@font-face {
	font-family: 'HMfont-home';
	src: url('data:application/x-font-woff2;charset=utf-8;base64,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')
		format('woff2');
}

.pullDown-effects {
	position: fixed;
	//top: calc(100upx - 36vw);
	top: 0;
	z-index: 9;
	width: 100%;
	height: 36vw;
	/*  #ifdef  APP-PLUS  */
	padding-top: var(--status-bar-height);
	/*  #endif  */
	image {
		width: 100%;
		height: 36vw;
	}
}
.status {
	width: 100%;
	height: 0;
	position: fixed;
	z-index: 10;
	background-color: #fff;
	top: 0;
	/*  #ifdef  APP-PLUS  */
	height: var(--status-bar-height); //覆盖样式
	/*  #endif  */
}
.header {
	width: 92%;
	padding: 0 4%;
	height: 100upx;
	display: flex;
	align-items: center;
	position: fixed;
	top: 0;
	z-index: 10;
	background-color: #fff;

	/*  #ifdef  APP-PLUS  */
	top: var(--status-bar-height);
	/*  #endif  */

	.addr {
		width: 120upx;
		height: 60upx;
		flex-shrink: 0;
		display: flex;
		align-items: center;
		font-size: 28upx;
		.icon {
			height: 60upx;
			margin-right: 5upx;
			display: flex;
			align-items: center;
			font-size: 42upx;
			color: #ffc50a;
		}
	}
	.input-box {
		width: 100%;
		height: 60upx;
		background-color: #f5f5f5;
		border-radius: 30upx;
		position: relative;
		display: flex;
		align-items: center;
		.icon {
			display: flex;
			align-items: center;
			position: absolute;
			top: 0;
			right: 0;
			width: 60upx;
			height: 60upx;
			font-size: 34upx;
			color: #c0c0c0;
		}
		input {
			padding-left: 28upx;
			height: 28upx;
			font-size: 28upx;
		}
	}
	.icon-btn {
		width: 60upx;
		height: 60upx;
		flex-shrink: 0;
		display: flex;
		.icon {
			width: 60upx;
			height: 60upx;
			display: flex;
			justify-content: flex-end;
			align-items: center;
			font-size: 42upx;
		}
	}
}
.place {
	background-color: #ffffff;
	height: 100upx;
	/*  #ifdef  APP-PLUS  */
	margin-top: var(--status-bar-height);
	/*  #endif  */
}
 // 新人红包
 .newUserBox {
	 image {
		 width: 600upx;
	 }
 }
.swiper {
	width: 100%;
	margin-top: 10upx;
	display: flex;
	justify-content: center;
	.swiper-box {
		width: 100%;
		height: 35vw;

		// overflow: hidden;
		// border-radius: 15upx;
		// box-shadow: 0upx 8upx 25upx rgba(0, 0, 0, 0.2);
		// //兼容ios，微信小程序
		position: relative;
		z-index: 1;
		swiper {
			width: 100%;
			height: 35vw;
			swiper-item {
				width: 100%;
				height: 100%;
				padding: 0 28upx;
				box-sizing: border-box;
				overflow: hidden;
				image {
					width: 100%;
					height: 35vw;
					border-radius: 10upx;
				}
			}
		}
		.indicator {
			position: absolute;
			bottom: 20upx;
			left: 50%;
			transform: translateX(-50%);
			background-color: rgba(255, 255, 255, 0.4);
			width: 150upx;
			height: 5upx;
			border-radius: 3upx;
			overflow: hidden;
			display: flex;
			.dots {
				width: 0upx;
				background-color: rgba(255, 255, 255, 1);
				transition: all 0.3s ease-out;
				&.on {
					width: (100%/3);
				}
			}
		}
	}
}

.category-list {
	width: 92%;
	margin: 0 4%;
	padding: 0 0 30upx 0;
	border-bottom: solid 2upx #f6f6f6;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	.category {
		width: 20%;
		margin-top: 50upx;
		display: flex;
		flex-wrap: wrap;
		.img {
			width: 100%;
			display: flex;
			justify-content: center;
			image {
				width: 9vw;
				height: 9vw;
			}
		}
		.text {
			margin-top: 16upx;
			width: 100%;
			display: flex;
			justify-content: center;
			font-size: 24upx;
			color: #3c3c3c;
		}
	}
}
.banner {
	width: 92%;
	margin: 40upx 4%;
	image {
		width: 100%;
		height: 20vw;
		border-radius: 10vw;
		box-shadow: 0upx 5upx 25upx rgba(0, 0, 0, 0.3);
	}
}
	/* 秒杀专区 */
	.seckill-section{
		padding: 4upx 30upx 24upx;
		background: #fff;
		.s-header{
			display:flex;
			align-items:center;
			height: 92upx;
			line-height: 1;
				
			.sort {
				min-width: 100upx;
				font-size: 34upx;
				font-weight: bold;
			}
			.more{
				font-size: 24upx;
				color: #666;
				margin-left: auto;
				display: flex;
				
			}
		
			.tip{
				font-size: 24upx;
				color: 000;
				margin: 0 20upx 0 40upx;
			}
			
		}
		.floor-list{
			white-space: nowrap;
		}
		.scoll-wrapper{
			display:flex;
			align-items: flex-start;
		}
		.floor-item{
			width: 200upx;
			margin-right: 20upx;
			font-size: 28upx;
			color: #000000;
			line-height: 1.8;
			image{
				width: 200upx;
				height: 200upx;
				border-radius: 6upx;
			}
			.clamp {
   overflow: hidden;
			.title {
				text-overflow: -o-ellipsis-lastline;
				 overflow: hidden;
				 text-overflow: ellipsis;
				 display: -webkit-box;
				 -webkit-line-clamp: 2;
				 line-clamp: 2;
				 -webkit-box-orient: vertical;
				 white-space: initial;
				 line-height: 1.3;
				 height: 70upx;
			}
}
			.price{
				color: #ed0013;
				font-size: 30upx;
				.oldPrice {
					margin-left: 20upx;
					color: #666;
					font-size: 24upx;
					text-decoration: line-through;
				}
			}
		}
	}
	.goods-list {
	// background-color: #f4f4f4;
	margin-top: 20upx;
	.topTabBar {
		width: 95%;
		margin: 0upx auto;
		background-color: #fff;
		height: 100upx;
		display: flex;
		overflow: auto;

		&.fixed {
			position: fixed;
			top: 100upx;
			z-index: 10;
			width: 100%;
		}
		.innerBox {
			display: flex;
			.grid {
				flex: 1;
				min-width: 20%;
				height: 90upx;
				font-size: 28upx;
				text-align: center;
				flex-shrink: 0;
				transition: all 0.2s ease;
				.text {
					height: 50upx;
					line-height: 50upx;
				}
				.cont {
					color: #444;
					font-size: 24upx;
				}
				&.on {
					font-size: 36upx;
					color: #e91a28;
					border-bottom: solid 4upx #e91a28;
				}
			}
		}
	}

	.loading-text {
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		height: 60upx;
		color: #979797;
		font-size: 24upx;
	}
	.product-list {
		margin-top: 20upx;
		width: 92%;
		padding: 0 4% 3vw 4%;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		.product {
			width: 48%;
			border-radius: 20upx;
			background-color: #fff;
			margin: 0 0 15upx 0;
			box-shadow: 0upx 5upx 25upx rgba(0, 0, 0, 0.1);
			.imgBox {
				position: relative;
				image {
					width: 100%;
					border-radius: 20upx 20upx 0 0;
				}
				.tagBox {
					position: absolute;
					left: 2upx;
					bottom: 10upx;
					width: 100%;
					.tags {
						padding: 2upx 10upx;
						font-size: 24upx;
						margin-right: 10upx;
						border-radius: 5upx;
						color: #fff;
						display: inline-block;
						&.red {
							background-color: #d85f61;
						}
						&.yellow {
							background-color: #ffcc4a;
						}
						&.green {
							background-color: #6fd85f;
						}
					}
				}
			}

			.name {
				width: 92%;
				padding: 10upx 4%;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
				text-align: justify;
				overflow: hidden;
				font-size: 30upx;
			}
			.info {
				display: flex;
				justify-content: space-between;
				align-items: flex-end;
				width: 92%;
				padding: 10upx 4% 10upx 4%;

				.price {
					color: #e65339;
					font-size: 30upx;
					font-weight: 600;
				}
				.slogan {
					color: #807c87;
					font-size: 24upx;
				}
			}
		}
	}
}
</style>
